<template>
  <t-modal
      :width="800"
      :title="title"
      :visible="visible"
      :confirmLoading="loading"
      @ok="
      () => {
        $emit('ok');
      }
    "
      @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-row>
            <a-col :span="12">
              <a-form-item
                  :label="$ct('parentRegion','父级区域')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  v-if="visible"
              >
                <tree-select
                    v-decorator="[
											'pid',
											{ initialValue: pid ,rules: [{ required: true, message: '必填' }] },
										]"
                    placeholder="请选择菜单"
                    :parameter="parameter"
                    :url="url"
                    :data="treeData"
                    idfield="id"
                    textfield="regionName"
                />
              </a-form-item>
            </a-col>
          <a-col :span="12">
            <a-form-item :label="$ct('regionName','区域名称')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                  style="width: 100%;"
                  :min="1"
                  :max="100"
                  v-decorator="['regionName',{ rules: [{ required: true, message: '必填' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$ct('regionCode','区域编码')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                  style="width: 100%;"
                  :min="1"
                  :max="100"
                  v-decorator="['regionCode',{ rules: [{ required: true, message: '必填' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$ct('sort','排序')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number
                  id="inputNumber"
                  style="width: 100%;"
                  :min="1"
                  :max="100"
                  v-decorator="['regionSort',{ rules: [{ required: true, message: '必填' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$ct('state','状态')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group
                  name="radioGroup"
                  v-decorator="['regionStatus', { initialValue: '1' , rules: [{ required: true, message: '必填' }]}]"
              >
                <a-radio value="1">
                  {{$ct("enable","启用")}}
                </a-radio>
                <a-radio value="0">
                  {{$ct("disable","禁用")}}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
                :label="$ct('expandOrNot','是否展开')"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
            >
              <a-radio-group
                  name="radioGroup"
                  v-decorator="['state', { initialValue: 'closed',rules: [{ required: true, message: '必填' }]}]"
              >
                <a-radio value="closed">
                  {{$ct("yes","是")}}
                </a-radio>
                <a-radio value="open">
                  {{$ct("no","否")}}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-form-item class="hiddenItem">
            <a-input v-decorator="['uuid']" type="hidden"/>
          </a-form-item>
          <a-form-item class="hiddenItem">
            <a-input
                v-decorator="['levelId', { initialValue: levelId}]"
                type="hidden"
            />
          </a-form-item>
        </a-row>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
  import pick from "lodash.pick";

  // 表单字段
  const fields = [
    "uuid",
    "regionName",
    "regionCode",
    "regionStatus",
    "regionSort",
    "closed",
    "regionStatus",
    "id",
    "pid",
    "levelId",
    'state',
  ];
  import TreeSelect from "@/components/TopVUI/custom/TreeSelect";

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      loading: {
        type: Boolean,
        default: () => false,
      },
      model: {
        type: Object,
        default: () => null,
      },
      type: {
        type: String,
      },
    },
    components: {
      TreeSelect,
    },
    data() {
      return {
        title: "",
        labelCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 8,
          },
        },
        wrapperCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 16,
          },
        },
        form: this.$form.createForm(this),
        leader: "",
        treeData: [],
        levelId: 0,
        pid: '',
        url: {
          fathersUrl: "/system/sysAdministrativeRegion/getListDataBylevelId",
          expandUrl: "/system/sysAdministrativeRegion/getListDataById",
          getListByKeywords: "",
        },
        parameter: {
          father: {
            levelId: 0,
          },
          children: {},
        },
      };
    },
    methods: {
      add(m, data) {
        this.treeData = data ? data : [];
        this.pid = m ? m.id : "";

      },
      edit(m, data) {
        // this.form.setFieldsValue(pick(m, fields));
        this.treeData = data;
        this.pid = m.pid;
      },
    },
    created() {
      // 防止表单未注册
      fields.forEach((v) => this.form.getFieldDecorator(v));
      // 当 model 发生改变时，为表单设置值
      this.$watch("model", () => {
        this.model && this.form.setFieldsValue(pick(this.model, fields));
      });
    },
  };
</script>
